<template>
  <div class="main">
    <div class="header">
        <div>
          <img style="width: 300px;height: auto;margin-top: 20px;margin-left: 50px" src="https://www.tcu.edu.cn/images/logo2.png" alt="加载失败">
        </div>
    </div>
    <div class="body">
      <div class="body-left">
          <img style="height: 90px;width: auto" src="https://www.tcu.edu.cn/images/xiaoxun.png" alt="加载失败">
      </div>
      <div class="body-right">
          <div class="login-form">
            <div  class="login-form-radio" style="margin-right: 20px;">
              <div class="icheck-material-teal" style="padding-bottom: 10px">
                <input type="radio" id="someRadioId1" name="someGroupName" style="color:red;" />
                <label for="someRadioId1" style="color: #FFFFFF">在校生</label>
              </div>
              <div class="icheck-material-teal" style="padding-bottom: 10px">
                <input type="radio" id="someRadioId2" name="someGroupName" />
                <label for="someRadioId2" style="color: #FFFFFF">教职工</label>
              </div>
              <div class="icheck-material-teal">
                <input type="radio" id="someRadioId3" name="someGroupName" />
                <label for="someRadioId3" style="color: #FFFFFF">管理员</label>
              </div>
            </div>
            <div class="login-form-input" style="font-style: oblique">
              <el-form ref="loginForm" :model="loginForm"  class="demo-ruleForm" :rules="rules">
                <div style="width: 110px;height: auto;position: absolute;margin-left: -60px;margin-top:10px;">
                  <img style="width: 110px;height: auto" src="https://www.tcu.edu.cn/images/logo2.png">
                </div>
                <div style="margin-left:70px;margin-bottom: 20px;align-items: center">
                  <h1 style="color: #303133">评奖评优系统</h1>
                </div>
                <el-form-item prop="userNumber">
                  <div style="display: flex">
                    <div style="color: #FFFFFF;width: 80px">学工号：</div>
                    <el-input v-model="loginForm.userNumber" autocomplete="off" type="text" placeholder="学工号"></el-input>
                  </div>
                </el-form-item>
                <el-form-item prop="password">
                  <div style="display: flex">
                    <div style="color: #FFFFFF;width: 80px">密码：：</div>
                    <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"></el-input>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="login">登录</el-button>
                  <el-button @click="dialogVisible = true">注册</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
    </div>
    <div class="foot">
      <el-dialog
          v-model="dialogVisible"
          title="目前注册功能暂未开放"
          width="60%"
      >
        <div style="height: 350px">
          <div class="register-main">
            <div class="register-head">
              <div>
                <h2>如有问题请联系管理员</h2>
              </div>
            </div>
            <div class="register-body">
              <ul>
                <li>微信：gasfafafas
                </li>
                <li>qq：244146121
                </li>
                <li>电话：1213454646
                </li>
                <li>邮箱：fasasf@163.com
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import 'vue3-marquee/dist/style.css'
import {ifUserNumber, toLogin} from "../api/user";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        userNumber: "",
        password: ""
      },
      role:'student',
      radio1: 1,
      dialogVisible: false,
      //校验数据
      rules: {
        //校验数据
        userNumber: [
          { required: true, message: "请输入学工号", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个数字", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      }
    }
  },
  methods: {

    login() {
      this.$refs['loginForm'].validate((valid) => {
          if (valid)
          {
            ifUserNumber({userNumber: this.loginForm.userNumber, password: this.loginForm.password}).then(
                res =>{
                  if (res.message === '用户存在')
                  {
                    toLogin(
                        {
                          userNumber: this.loginForm.userNumber,
                          password: this.loginForm.password
                        }
                    ).then(res => {
                      if (res.message === '登陆成功'){
                        this.$store.commit('login', res.data)
                        if(res.data.nickname==='student'){
                          window.localStorage.setItem('roles','student')
                          this.$router.replace('/StudentNotice')
                        }else if(res.data.nickname==='teacher')
                        {
                          window.localStorage.setItem('roles','teacher')
                          this.$router.replace('/Teacher')
                        }
                        else{
                          window.localStorage.setItem('roles','admin')
                          this.$router.replace('/Admin')
                        }
                        this.$notify({
                          title: '成功',
                          message: "欢迎" + res.data.username,
                          type: 'success'
                        });
                      }else {
                        this.$notify({
                          title: '密码错误',
                          message: "请检查密码是否正确",
                          type: 'error'
                        });
                      }
                    })
                  }
                  else
                  {
                    this.$notify({
                      title: '用户不存在',
                      message: "请检查学工号是否存在",
                      type: 'error'
                    });
                  }
                }
        );
          }
          else{
            return false;
          }
      })

    },
  }
}
</script>
<style scoped>
.main {
  background: url(https://www.tcu.edu.cn/images/xyfg222.jpg) no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
}
.login-form {
  display: -webkit-flex; /* Safari */
  display: flex;
  border-radius: 20px;
  background-clip: padding-box;
  margin: 170px auto;
  width: 400px;
  padding: 35px;
  background-color: rgba(238, 228, 228, 0.3);
  border: 1px solid darkgrey;
}
.header {
  position: absolute;
}
.body {
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.body-left {
  margin-right: 50px;
  width: auto;
}
.body-right {
  margin-left: 50px;
}
.login-form {
  display: -webkit-flex; /* Safari */
  display: flex;
  align-items: center;
}
/*注册框中样式*/
.register-main {
  color: #ffffff;
  display: flex;
  height: 350px;
  justify-content: center;
  flex-direction: column;
  background: url(https://www.tcu.edu.cn/images/xyfg-pic456.jpg) no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
}
.register-body {
  color: white;
  display: flex;
  justify-content: center;
  font-size: 30px;
}
</style>
